<script setup lang="ts">
  import IconifyIcon from "@/components/IconifyIcon/index.vue";
  import { ArrowRight, Edit, Search } from "@element-plus/icons-vue";
  import { getUserInfo } from "@/api/user";
  import { onMounted, reactive, ref } from "vue";
  import router from "@/router";

  defineOptions({
    name: "cx-header",
  });

  let username = ref("");
  let point = ref(0);

  /** 导航栏列表 */
  const NAVLIST = [
    { name: "首页", path: "/", id: 1, icon: "ep:house" },
    { name: "搜索", path: "/#/search", id: 2, icon: "ep:search" },
    // { name: "热门商品", path: "/product", id: 2, icon: "ep:goods" },
    // { name: "联系我们", path: "/contact", id: 3, icon: " mdi:phone-outline" },
  ];

  /** 用户模块列表 */
  const USERLIST = [
    { id: 0, name: "基本信息", path: "/#/user/info", icon: "ep:user" },
    { id: 1, name: "礼品兑换", path: "/#/user/gift", icon: "ep:shopping-bag" },
    {
      id: 2,
      name: "兑换记录",
      path: "/#/user/gift/order",
      icon: "ep:shopping-cart",
    },
    {
      id: 3,
      name: "订单查询",
      path: "/#/user/order",
      icon: "ep:search",
    },
  ];

  const searchMode = ref("text");

  // 搜素关键词
  const keyword = ref("");

  // 搜素分类下拉列表
  const options = [
    {
      value: "text",
      label: "关键词",
    },
    {
      value: "code",
      label: "货号",
    },
    {
      value: "casno",
      label: "CAS",
    },
  ];

  /** 搜索字段 */
  let searchForm = {};

  /** 搜索模式匹配 */
  let conditionsMap = new Map([
    ["text", () => (searchForm.text = keyword.value)],
    ["code", () => (searchForm.code = keyword.value)],
    ["casno", () => (searchForm.casno = keyword.value)],
  ]);

  /** 搜索方法 */
  const search = () => {
    let mode = searchMode.value;
    if (conditionsMap.has(mode)) {
      conditionsMap.get(mode)();
    }
    router.push({ path: "/search", query: { ...searchForm } });
  };

  /** 重置搜索 */
  const resetForm = () => {
    searchForm = {};
  };

  onMounted(() => {
    getUserInfo().then((res) => {
      username.value = res.myinfo.username;
      point.value = res.myinfo.point;
    });
  });
</script>

<template>
  <!-- 顶部导航栏区域 -->
  <!-- 实现吸顶效果 和 响应式布局 -->
  <header
    class="border-b border-solid border-0 border-[#e5e5e5] sticky top-0 bg-white z-10"
  >
    <div class="px-4 xl:px-0 xl:w-[1200px] xl:mx-auto py-2">
      <div
        class="flex justify-between text-slate-700 font-semibold text-sm leading-6 dark:text-slate-200"
      >
        <img src="@/assets/img/logo.png" width="120" height="60" />

        <!-- PE 搜索框 -->
        <el-form style="display: flex; align-items: center">
          <div
            class="search-bar hidden md:flex items-center w-[auto] md:w-[400px]"
          >
            <el-form-item>
              <el-select
                v-model="searchMode"
                style="width: 100px"
                @change="resetForm"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                />
              </el-select>
            </el-form-item>

            <el-form-item>
              <div class="flex-1 relative">
                <el-input v-model="keyword" placeholder="请输入搜索内容" />
                <el-button
                  :icon="Search"
                  circle
                  style="position: absolute; top: 3px; right: 6px; border: none"
                  @click="search()"
                />
              </div>
            </el-form-item>
          </div>
        </el-form>

        <!-- 导航栏 -->
        <div class="flex items-center">
          <!-- PC -->
          <nav class="hidden md:block">
            <ul class="flex list-none gap-x-8 pl-0">
              <li v-for="item in NAVLIST" :key="item.id">
                <a
                  class="no-underline hover:text-sky-500 dark:hover:text-sky-400 text-slate-700"
                  :href="item.path"
                  >{{ item.name }}</a
                >
              </li>
            </ul>
          </nav>

          <div
            class="border-slate-400 md:border-l border-solid border-0 flex items-center ml-6 pl-4"
          >
            <!-- PE 导航栏 -->
            <el-popover
              placement="bottom"
              width="220"
              height="486"
              trigger="hover"
              :show-arrow="false"
            >
              <template #reference>
                <i-mdi-menu
                  class="md:hidden hover:text-sky-500 hover:cursor-pointer mx-2 size-[24px] md:size-[18px]"
                />
              </template>
              <template #default>
                <ul class="list-none pl-0">
                  <li
                    v-for="item in NAVLIST"
                    :key="item.id"
                    class="h-[40px] rounded-[10px] hover:bg-[#f2f2f2]"
                  >
                    <a
                      class="relative mx-[10px] h-[40px] flex items-center no-underline dark:hover:text-sky-400 text-slate-700 text-[16px]"
                      :href="item.path"
                    >
                      <IconifyIcon :name="item.icon" :size="22"></IconifyIcon>
                      <div class="!pl-[10px]">{{ item.name }}</div>
                      <ArrowRight class="absolute right-0 font-bold" />
                    </a>
                  </li>
                </ul>
              </template>
            </el-popover>

            <!-- 通用 用户登录 -->
            <el-popover
              placement="bottom"
              width="220"
              height="486"
              trigger="hover"
              :show-arrow="false"
            >
              <template #reference>
                <i-ep-user
                  class="text-[24px] hover:text-sky-500 hover:cursor-pointer mx-2 size-[24px] md:size-[18px]"
                />
              </template>
              <template #default>
                <div
                  class="p-[6px] pb-[12px] border-solid border-b border-0 border-slate-100"
                >
                  <a
                    class="flex content-center justify-between no-underline text-[#000]"
                    href="/#/login"
                    v-if="!username"
                  >
                    <div class="text-[16px] font-bold">
                      欢迎访问辰星生物<br />点此登录
                    </div>
                    <div>
                      <ArrowRight class="font-bold h-full" />
                    </div>
                  </a>
                  <a
                    class="flex content-center justify-between no-underline text-[#000] px-[10px]"
                    href="#"
                    v-else
                  >
                    <div>
                      <div class="text-[18px] font-bold">
                        {{ username }}
                      </div>
                      <div class="text-[12px] font-normal">积分 {{ point }}</div>
                    </div>
                    <div>
                      <ArrowRight class="font-bold h-full" />
                    </div>
                  </a>
                </div>

                <ul class="list-none pl-0">
                  <li
                    v-for="item in USERLIST"
                    :key="item.id"
                    class="h-[40px] rounded-[10px] hover:bg-[#f2f2f2]"
                  >
                    <a
                      class="relative mx-[10px] h-[40px] flex items-center no-underline dark:hover:text-sky-400 text-slate-700 text-[16px]"
                      :href="item.path"
                    >
                      <IconifyIcon :name="item.icon" :size="22"></IconifyIcon>
                      <div class="!pl-[10px]">{{ item.name }}</div>
                      <ArrowRight class="absolute right-0 font-bold" />
                    </a>
                  </li>
                </ul>
              </template>
            </el-popover>
          </div>
        </div>
      </div>
    </div>
  </header>
</template>

<style lang="scss" scoped>
  .search-bar {
    :deep(.el-select__wrapper) {
      border-radius: 16px 0 0 16px;
    }
    :deep(.el-select__placeholder) {
      text-align: center;
    }
    :deep(.el-input__wrapper) {
      border-radius: 0 16px 16px 0;
    }

    :deep(.el-button) {
      height: 30px;
      width: 30px;
      &:hover {
        background-color: #fff;
      }
    }
    :deep(.el-form-item) {
      margin-bottom: 0px;
    }
  }
</style>
